import {reactive, ref} from "vue";
import array from "./array.js";
import random from "../util/random.js";
import date from "@/zdpui/util/date.js";

// 用于crud的分页
const useCrudPage = (apiGetPage) => {
    // 是否在加载中
    const loading = ref(true);
    // 第几页
    const page = ref(1);
    // 每页数据
    const size = ref(8);
    // 共多少条数据
    const total = ref(0);
    // 表格数据
    const data = ref([])
    // 监听分页变化
    const onChange = async (v) => {
        page.value = v
        await loadData()
    }
    // 加载数据
    const loadData = async () => {
        loading.value = true
        const newData = await apiGetPage(
            page.value,
            size.value,
        )
        data.value = newData.data
        total.value = newData.total
        loading.value = false
    }

    return {
        page,
        size,
        total,
        data,
        loading,
        loadData,
        onChange,
    }
}

// 用于表格
const useCrudTable = (data, _columns = null, apiDelete = null) => {
    // 表格数据
    const columns = ref(_columns ?? [
        {
            title: "编号",
            key: "id",
            width: 80,
            align: "center"
        },
        {
            title: "姓名",
            key: "name",
            width: 100,
            align: "center"
        },
        {
            title: "年龄",
            key: "age",
            width: 100,
            align: "center"
        }
    ])
    // 删除索引
    const deleteIndex = ref()
    // 删除数据
    const deleteData = ref()
    // 删除对话框
    const isShowDeleteDialog = ref(false);
    // 执行删除
    const onShowDeleteDialog = async (index, item) => {
        isShowDeleteDialog.value = true;
        deleteIndex.value = index
        deleteData.value = item
    }
    // 确认删除
    const onDelete = async () => {
        isShowDeleteDialog.value = false;
        array.remove(data.value, deleteIndex.value)
        if (apiDelete && deleteData.value.id) await apiDelete(deleteData.value.id)
    };
    const onHideDeleteDialog = () => {
        isShowDeleteDialog.value = false;
    };
    return {
        columns,
        deleteIndex,
        deleteData,
        isShowDeleteDialog,
        onShowDeleteDialog,
        onDelete,
        onHideDeleteDialog,
    }
}

// 用户增删改查操作的表单操作
const useCrudForm = (
    data,
    formData,
    title = "用户",
    apiAdd=null, // 用于新增的接口
    apiUpdate = null, // 用于更新的接口
) => {
    // 是否显示对话框
    const isShowModal = ref(false);
    // 对话框标题
    const modalTitle = ref(`编辑${title}`);
    // 是否为编辑
    const isEdit = ref(false);
    // 编辑的ID
    const editId = ref(0);
    // 编辑的索引
    const editIndex = ref(0);

    // 点击编辑, 显示编辑对话框
    const onShowEditModal = (index, item) => {
        isEdit.value = true;
        isShowModal.value = true;
        editId.value = item.id
        editIndex.value = index
        formData.name = item.name
        formData.age = item.age
        modalTitle.value = `编辑${title}`
    }
    // 清空表单
    const clearFormData = () => {
        for (const key in formData) formData[key] = null
    }
    // 隐藏对话框
    const onHideModal = () => isShowModal.value = false
    // 显示对话框
    const onShowAddModal = () => {
        clearFormData()
        modalTitle.value = `新增${title}`
        isShowModal.value = true;
    };
    // 点击对话框中的保存按钮
    const onSave = async  () => {
        isShowModal.value = false;

        if (isEdit.value) {
            data.value[editIndex.value] = {
                id: editId.value,
                add_time: date.nowStr(),
                ...formData,
            }
            if (apiUpdate) await apiUpdate(formData)
        } else {
            let newUser = {
                id: random.id1(),
                add_time: date.nowStr(),
                ...formData,
            }
            array.insertFirst(data.value, newUser)
            if (apiAdd) await apiAdd(formData)
        }

        isEdit.value = false;
        clearFormData()
    };


    return {
        isShowModal,
        modalTitle,
        isEdit,
        editIndex,
        editId,
        clearFormData,
        onShowEditModal,
        onShowAddModal,
        onHideModal,
        onSave,
    }
}

export default {
    useCrudPage,
    useCrudTable,
    useCrudForm,
}